import React from 'react';
import { Layout, Menu, Button } from 'antd';
import Login from './pages/login'
import Home from './pages/home'
import Goods from './pages/goods'
import Team from './pages/team'
import Article from './pages/article'
import ArticleAdd from './pages/article/add'
import { Route, Switch, useLocation, useHistory } from 'react-router-dom';
import { HomeOutlined, TeamOutlined, ReadOutlined, ShoppingOutlined } from '@ant-design/icons'
import axios from './common/axios'
import { useDispatch, useSelector } from 'react-redux'

const { Sider, Content, Footer } = Layout;
const menus = [
  { title: '首页', icon: <HomeOutlined />, path: '/', exact: true, component: Home },
  { title: '团队管理', icon: <TeamOutlined />, path: '/team', component: Team },
  { title: '文章管理', icon: <ReadOutlined />, path: '/article', exact: true, component: Article },
  { title: '文章添加', path: '/article/add', component: ArticleAdd },
  { title: '商品管理', icon: <ShoppingOutlined />, path: '/goods', component: Goods },
];
function App() {

  const history = useHistory();
  const location = useLocation();
  const dispatch = useDispatch();
  const { token, access } = useSelector<{ token: string; access: { [key: string]: any } }, { token: string; access: { [key: string]: any } }>((state) => {
    return state
  });

  const logout = async () => {
    await axios('/logout');
    dispatch({
      type: 'clear_token'
    });
  };
  return (
    <div className="App">
      {token ? (
        <Layout style={{ minHeight: '100vh' }}>
          <Sider collapsible>
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={[location.pathname]}
              onClick={ev => {
                if (typeof ev.key === "string") {
                  history.push(ev.key)
                  return
                }
                throw new Error(`key must is a string`);
              }}
            >
              {menus.filter(item => {
                return item.icon
              }).map(menu => (
                <Menu.Item key={menu.path}>
                  {menu.icon}
                  <span>{menu.title}</span>
                </Menu.Item>
              ))}
            </Menu>
          </Sider>
          <Layout>
            <div>
              <Button onClick={() => {
                logout()
              }}>退出登录</Button>
            </div>
            <Content style={{ padding: "40px 60px" }}>
              <Switch>
                {menus.map(menu => (
                  <Route
                    key={menu.path}
                    path={menu.path}
                    exact={menu.exact}
                    component={menu.component}
                  />
                ))}
              </Switch>
            </Content>
            <Footer style={{ textAlign: 'center' }}>
              xxx公司版权所有
            </Footer>
          </Layout>
        </Layout>
      ) : (
          <Login />
        )}
    </div >
  );
}

export default App;
